<template>
	<div>
		<div class="ques-opt-title">
			<i class="star" v-if="dataVal?.attribute?.required"></i>
			<i>{{ index + 1 }}、</i>
			<div contenteditable="true" @keydown="preventEnter" @blur="dataChange($event, dataVal, 'title')">{{ dataVal.title }}</div>
			<div class="ques-opt-title-ope">
				<span @click="$emit('remove', dataVal)" class="delete">✖</span>
				<span class="move">☝</span>
				<input type="checkbox" v-model="isRequired" />
			</div>
		</div>

		<div class="ques-opt-body">
			<div class="ques-opt-item" v-for="(element, index) in dataVal.children" :key="element.id">
				<div class="ques-opt-label">
					<span class="k-input"></span>
				</div>
				<div class="ques-opt-label-ope"> </div>
			</div>
		</div>
	</div>
</template>

<script>
import common from "./common.js";
export default {
	mixins: [common],
	methods: {
		addOption() {
			this.dataVal.children.push({ id: this.$ids.get(), title: "选项" + (this.dataVal.children.length + 1) });
		}
	}
};
</script>
